<!--日历组件-->
<template>
  <section class="block score-bd">
    <section class="date-wraper" >
      <div class="month-box">
        <i class="pre-icon pre-year-icon" @click="changeMonth('preYear')"></i>
        <i class="pre-icon" @click="changeMonth('pre')"></i>
        <h1>{{year}}年{{month + 1}}月</h1>
        <i class="next-icon" @click="changeMonth('next')"></i>
        <i class="next-icon next-year-icon" @click="changeMonth('nextYear')"></i>
      </div>
      <div ref="swiper">
        <div  class="swiper-slide">
          <div class="week-box">
            <div class="week-item" v-for="(item,index2) in '0123456'" :key="index2">
              <div class="week">{{index2 | week}}</div>
            </div>
          </div>
        </div>
        <div  class="swiper-slide" v-for="(week,index) in monthList" :key="index">
          <div class="week-box">
            <div class="week-item" v-for="(item,index2) in week" :key="index2">
              <div :class="['day', {'active': isSelect(year, month, week[index2])}]" @click="getList(week[index2])">{{item}}</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </section>
</template>

<script>
  import moment from 'moment'
  import tools from '@/utils/tools'
  export default {
    name: 'datePickComponent',
    props:["selectDateList"],
    data () {
      return {
        dateList:[],
        dateStr:'',
        sysFile: {},
        todayData: {},
        swiperOption: {
          slidesPerView: 1,
          spaceBetween: 0,
          loopFillGroupWithBlank: true,
          //显示分页
          pagination: {
            el: '.swiper-pagination'
          },
          loop: false,
          initialSlide: 0,
          //自动轮播
          autoplay: false,
        },
        year: new Date().getFullYear(),
        month: new Date().getMonth(),
        monthList: [],
      }
    },
    filters: {
      week: function (index) {
        return ['日','一','二','三','四','五','六'][index];
      }
    },
    created () {
      moment.lang('zh-cn')
      this.userInfo = this.$localStorage.get('userInfo')
      this.dateStr = moment().format('YYYY-MM-DD')
      this.getMonthList(new Date())
    },
    methods: {
      isSelect(year, month, day) {
        if (day === '' || !Array.isArray(this.selectDateList)) return false
        return this.selectDateList.includes(`${year}-${(month+1)}-${day}`)
      },
      getList(item, index, index2) {
        this.curWeekIndex = index * 7 + index2;
        this.dateStr =  this.year + '-' + (this.month+1<10? '0'+(this.month+1) : ''+(this.month+1)) + '-' + (Number(item)<10?'0'+item:item)
        console.log('年月日：', this.dateStr);
        this.$emit('onDate', this.dateStr)
      },
      getMonthList(cur_date) {
        this.monthList = [];
        this.swiperOption.initialSlide = 0;
        // let date = new Date();
        let monthList = []
        // let cur_day = cur_date.getMonth() === date.getMonth() ? cur_date.getDate() : 1;
        let cur_day = cur_date.getDate();
        let cur_month = cur_date.getMonth();
        cur_date.setDate(1);
        if (cur_date.getDay() != 0) { // 如果1号不是星期天
          // 输出1号前面空白的星期
          for (let i = 0; i < cur_date.getDay(); i++) {
            monthList.push('');
          }
        }
        while (cur_date.getMonth() == cur_month) {
          monthList.push(cur_date.getDate());
          cur_date.setDate(cur_date.getDate() + 1);
        }

        for(let j = cur_date.getDay();j <= 6; j++){
          // 输出月最后一天后面空白的星期
          monthList.push('');
        }
        let num = Math.ceil(monthList.length / 7);
        for(let k = 0 ;k < num; k++){
          let temp = monthList.slice(k*7,k*7+7);
          temp.forEach((item, index) => {
            if (item == cur_day) {
              this.swiperOption.initialSlide = k;
              this.curWeekIndex = k*7 + index;
            }
            this.dateList.forEach(data=>{
              if(item==data.day){
                temp.splice(index,1,data)
              }
            })
          })
          // 清除一周内全是''的星期
          let isNull = temp.every(item => {
            return item === '';
          })
          if (!isNull) {
            this.monthList.push(temp);
          }
        }
        console.log(this.dateList)
        console.log(this.monthList, this.swiperOption.initialSlide);
      },
      changeMonth(type) {
        if (type === 'pre') {
          this.year = this.month - 1 === -1 ? this.year - 1 : this.year;
          this.month = this.month - 1 === -1 ? 11 : this.month - 1;
        } else if(type === 'next') {
          if(this.year>=new Date().getFullYear()&&this.month>=new Date().getMonth()){
            this.tools.tip("已经到达本月")
            return
          }
          this.year = this.month + 1 === 12 ? this.year + 1 : this.year;
          this.month = this.month + 1 === 12 ? 0 : this.month + 1;
        } else if(type === 'preYear') {
          this.year = --this.year;
        } else if(type === 'nextYear') {
          if(this.year>=new Date().getFullYear()){
            this.tools.tip("没有更多数据")
            return
          }
          this.year = ++this.year;
        }
        this.$emit('onDateChange', this.year + '-' + (this.month + 1 + '').padStart(2, '0'))
        console.log('年月：', this.year + '-' + (this.month + 1));
        this.getMonthList(new Date(this.year, this.month, 1));
      },
      getTimeDay (createTime) {
        if (!createTime) {
          return ''
        }
        return moment(createTime).format('MM月DD日')
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
  .score-bd {
    padding:10px 30px;
    .date-wraper {
      border-bottom: 0px solid #E5E5E5;
      box-sizing: border-box;
      .month-box {
        display: flex;
        height: 95px;
        justify-content: space-around;
        align-items: center;
        border-bottom: 1px solid #E5E5E5;
        i {
          display: inline-block;
          width: pxToRem(21px);
          height: pxToRem(35px);
          &.pre-icon {
            background: url("../../../static/images/dangjian/mall/arrow-left.png") no-repeat center;
            background-size: auto 100%;
            &.pre-year-icon {
              width: pxToRem(44px);
              background-position: 1px center;
              background-repeat: repeat-x;
            }
          }
          &.next-icon {
            background: url("../../../static/images/dangjian/mall/arrow-right.png") no-repeat center;
            background-size: auto 100%;
            &.next-year-icon {
              width: pxToRem(44px);
              background-position: 1px center;
              background-repeat: repeat-x;
            }
          }
        }
      }
      .week-box {
        padding: 20px 0 20px;
        display: flex;
        justify-content: space-between;
        .week-item {
          .week {
            text-align: center;
            font-size: 16PX;
            color: #999999;
            margin-bottom: 34px;
          }
          .day {
            font-size: 16PX;
            color: #333333;
            margin-bottom: 20px;
            width: 62px;
            height: 62px;
            text-align: center;
            line-height: 62px;
            border-radius: 50%;
            background: #ffffff;
            &.active {
              background: #EC860D;
              color: #ffffff;
            }
            &.sfdt{
              background: #13C296;
              color: #ffffff;
              pointer-events: none;
            }
            &.sfbdt{
              background: #FFC14F;
              color: #ffffff;
              pointer-events: none;
            }
            &.wdt{
              background: #C92519;
              color: #ffffff;
            }
            &.read{
              background:none !important;
              pointer-events: none;
            }
            &.readonly{
               background: #eaeaea;
               pointer-events: none;
            }
          }
        }
      }
      .week-box1 {
        padding: 20PX 0 20PX;
        display: flex;
        /*justify-content: space-between;*/
        .tuli{
          width: 15%;
          font-size: 0.4rem;
          line-height: 8vh;
        }
        .week-items {
          float: left;
          width: 85%;
          .week {
            text-align: center;
            font-size: 16PX;
            color: #999999;
            margin-bottom: 34px;
          }
          .day {
            width: 25%;
            font-size: 15PX;
            color: #333333;
            float: left;
            text-align: center;
            .text{
              text-align: center;
            }
            .color{
              margin: 0 auto 20px;
              width: 62px;
              height: 62px;
              text-align: center;
              line-height: 62px;
              border-radius: 50%;
              background: #ffffff;
              &.active {
                background: #EC860D;
                color: #ffffff;
              }
              &.sfdt{
                background: #13C296;
                color: #ffffff;
                pointer-events: none;
              }
              &.sfbdt{
                background: #FFC14F;
                color: #ffffff;
                pointer-events: none;
              }
              &.wdt{
                background: #C92519;
                color: #ffffff;
              }
              &.readonly{
                background: #eaeaea;
                pointer-events: none;
              }
            }

          }
        }
      }
    }
    .item {
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:37px 0;
      border-bottom:1px solid $border-color;
      &:last-child {
        border:none;
      }
      .cont {
        width:75%;
        .title {
          font-size: 16PX;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
        }

        .time {
          font-size: $tipFontSize;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
        }
      }
      .tip {
        font-size: 16PX;
        color: #E20002;
      }
    }
  }
  .mine-page >>> .swiper-pagination-bullet-active {
    background: #EC850C;
  }
  .message{
    .head-btn-text{
      position: absolute;
      top: 50%;
      right: .4rem;
      -webkit-transform: translate3d(0, -50%, 0);
      transform: translate3d(0, -50%, 0);
      white-space: nowrap;
      font-size: 12PX;
      border-radius: .13333rem;
      line-height: .58667rem;
      font-weight: 400;
      text-align: center;
      color: #fff;
    }
  }
</style>
